<template>
  <div>
    <van-nav-bar title="礼物" left-text="返回" right-text="搜索" left-arrow @click-left="back" @click-right="toSearch">
      <template #title v-if="isShowLoading">
          <van-loading  size="24px" color="#1989fa"></van-loading>
      </template>
    </van-nav-bar>
    <van-row>
        <van-col span="5">
            <van-sidebar v-model="selValue" @change="selChange" class="boxHeight">
              <van-sidebar-item
                  v-for="(item,index) in sideBarList"
                  :key="index"
                  :title="item"
            />
            </van-sidebar >
        </van-col>
        
        <van-col span="19">
          
              <scroll
              class="content"
              ref="refScroll"
              :probe-type="2"
              :pull-up-load="true"
              @scroll="scroll"
              @click="clickList"
              @pullingUp="loadMore"
              :handleToScroll="handleToScroll"
              >


              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              <goods-list :goods="goods" :size="imgSize"></goods-list>
              
              <transition name="fade" mode="out-in" appear v-show="isShowUpLoading">
                  <van-loading  size="24px" vertical>加载中...</van-loading>
              </transition>

            </scroll>

        </van-col>
    </van-row>
  </div>
</template>

<script>
import GoodsList from '/@//components/GoodsList.vue';
import Scroll from '/@//components/Scroll.vue';
import { Toast1s, wid } from '/@//utils/hit.js'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { debounce } from "/@//utils/hit.js"; 

import { ref, computed, onMounted } from 'vue'

export default {
    name: "category",

    components: {
      GoodsList,
      Scroll
    },
    setup(){

      const router = useRouter()
      const store = useStore()
      const imgSize = ref([])
      const w = wid(140)
      
      imgSize.value = [w, w]
      const back = () => router.back()
      const toSearch = () => router.push({
          path: "/search"
        })

      // side
      const selValue = ref(0);
      const sideBarList = computed(() => store.state.sideBarList)
      const selChange = (i) => { Toast1s("分类变了> " + i)}
      const side = { selValue,sideBarList,selChange}

      // content
      const goods = computed(() => {
        return store.state.goods
      })
      const scroll = (position) => {
        console.log(position, 1)
      }
      const clickList = (position) => {
        console.log(position, 2)
      }
      // 下
      const nothing = "没有啦没有啦"
      const isShowUpLoading = ref(false);

      const loadMore = () => {

        console.log(2, isShowUpLoading.value)
        isShowUpLoading.value = true
        
        // data async action
        setTimeout(() =>{
          isShowUpLoading.value = false
          refScroll.value.finishPullUp()
          Toast1s(nothing)
        }, 1000)

      }
      // 上
      const isShowLoading = ref(false)
      const handleToScroll = (pos) => {
        if (pos.y > 60) {
            console.log(1, isShowLoading.value)
            isShowLoading.value = true;
            setTimeout(() =>{
              isShowLoading.value = false
              refScroll.value.finishPullUp()
              Toast1s(nothing)
            }, 1000)
        }

      }
      const refScroll = ref(null)

      const content = { goods, imgSize, scroll, loadMore, isShowUpLoading, handleToScroll, isShowLoading, clickList }

      onMounted(() => {
        window.addEventListener("resize", () => {
            let w1 = wid(140)
            imgSize.value = [w1, w1]
        })
      })

        return {
          back, toSearch
          ,...side, ...content, refScroll
        }
      }
}
</script>

<style lang="less">
.boxHeight {
  height: calc(100vh - 100px);
}

.wrapper {
  height: calc(100vh - 100px);
  /* position: absolute; */
  /* top: 66px; */
  bottom: 49px;
  left: 0;
  right: 0;
  /* background-color: #fff; */
  overflow: hidden;
}
.pullDown {
  padding-top: var(--van-nav-bar-height);
  padding: 16px;
  text-align: center;
  border: none;
}
.pullUp {
  padding-bottom: var(--van-nav-bar-height);
  text-align: center;
  border: none;
}
.back-top {
  border: 1px solid red;
}

::-webkit-scrollbar {
    height: 0;
    width: 0;
    color: transparent;
}
</style>